<template>

  <div style="
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: stretch;
">
    <div id="main" style="width: 800px;height:400px; "></div>
    <div id="main1" style="width: 800px;height:400px; "></div>
  </div>

    <div style="border: 1px solid black; ">
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=registryUserCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                累计用户
                                <el-tooltip effect="dark" content="所有注册的用户"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上月</span>
                            <span class="green">
                                24%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=activeUserCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                活跃用户数
                                <el-tooltip effect="dark" content="最近一个月活跃用户统计"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上周</span>
                            <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargeUserCount title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充值用户总数
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上个月</span>
                            <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <div style="border: 1px solid black; margin-top: 8px;">
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargingAmountCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电总金额
                                <el-tooltip effect="dark" content="累计充值金额，就是用户累计使用金额+用户累计可用余额"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上月</span>
                            <span class="green">
                                21%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargingTimesCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电订总单数
                                <el-tooltip effect="dark" content="用户累计充电次数"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上周</span>
                            <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value=chargingExceptionCount title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                充电异常总次数
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>than yesterday</span>
                            <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

    <div style="border: 1px solid black; margin-top: 8px;">
        <el-row :gutter="32">
            <el-col :span="6">
                <div class="statistic-card">
                    <el-statistic :value=totalStationCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                              充电站总数
                                <el-tooltip effect="dark" content="累计充值金额，就是用户累计使用金额+用户累计可用余额"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上月</span>
                            <span class="green">
                                21%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="statistic-card">
                    <el-statistic :value=onlineStationCount>
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                              可用充电站数量
                                <el-tooltip effect="dark" content="用户累计充电次数"
                                    placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比上周</span>
                            <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="statistic-card">
                    <el-statistic :value=totalGunCount title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                              充电枪总数
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>than yesterday</span>
                            <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
          <el-col :span="6">
            <div class="statistic-card">
              <el-statistic :value=onlineGunCount title="New transactions today">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    可用充电枪数量
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>than yesterday</span>
                  <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
    </div>

    <div style="border: 1px solid black; margin-top: 8px;">
    <el-row :gutter="32">
      <el-col :span="6">
        <div class="statistic-card">
          <el-statistic :value=payOrderCountTimes>
            <template #title>
              <div style="display: inline-flex; align-items: center">
                支付次数
                <el-tooltip effect="dark" content="累计充值金额，就是用户累计使用金额+用户累计可用余额"
                            placement="top">
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>比上月</span>
              <span class="green">
                                21%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistic-card">
          <el-statistic :value=payOrderFailCountTimes>
            <template #title>
              <div style="display: inline-flex; align-items: center">
                支付失败次数
                <el-tooltip effect="dark" content="用户累计充电次数"
                            placement="top">
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>比上周</span>
              <span class="red">
                                12%
                                <el-icon>
                                    <CaretBottom />
                                </el-icon>
                            </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistic-card">
          <el-statistic :value=payOrderCountAmount title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                支付总金额
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistic-card">
          <el-statistic :value=payOrderFailCountAmount title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                支付失败金额
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                                16%
                                <el-icon>
                                    <CaretTop />
                                </el-icon>
                            </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>
<script setup>
import {onMounted, ref} from 'vue'
import {InitUserCount, User7DayTotalRegistry} from '@/api/user/userinfo.js'
import { InitStationCount,InitChargingCount } from '@/api/station/station.js'
import {PayOrderCount} from "@/api/pay.js";
//https://blog.csdn.net/wkj001/article/details/145927798
import * as echarts from 'echarts';

const registryUserCount = ref(0)
const activeUserCount = ref(0)
const chargeUserCount = ref(0)

const chargingAmountCount= ref('0')
const chargingTimesCount= ref(0)

const chargingExceptionCount= ref(0)

//充电站总数
const totalStationCount= ref(0)
//可用充电站数量
const onlineStationCount= ref(0)
//充电枪总数
const totalGunCount= ref(0)
//可用充电枪数量
const onlineGunCount=ref(0)

const payOrderCountTimes=ref(0)
const payOrderFailCountTimes=ref(0)
const payOrderCountAmount=ref("0")
const payOrderFailCountAmount=ref("0")
const userCountDay=ref([])
const userCountDay1=ref([])
const day=ref([])

const isLoading = ref(false)



onMounted(async () => {
 const data=await initUserCount()
  initChart(data);

});



const initChart = (data) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: '累计注册用户（一周）'
    },
    tooltip: {},
    xAxis: {
      data: data.dayReistryList
    },
    yAxis: {},
    series: [
      {
        name: '已注册用户总数',
        type: 'bar',
        data: data.userReistryCountList
      }
    ]
  });
  // 基于准备好的dom，初始化echarts实例
  const myChart1 = echarts.init(document.getElementById('main1'));
  // 绘制图表
  myChart1.setOption({
    title: {
      text: '一周之内活跃用户数据'
    },
    tooltip: {},
    xAxis: {
      data: data.dayActiveList
    },
    yAxis: {},
    series: [
      {
        name: '当日活跃用户',
        type: 'bar',
        data: data.userActiveCountList
      }
    ]
  });
};

async function initUserCount() {
  try {
    const response = await User7DayTotalRegistry();
    if (response.data.code === 200000) {
      console.info('接口请求成功:', response.data.data);
      return response.data.data;
    }
    console.error('接口返回错误状态码:', response.data.code);
    return null;
  } catch (error) {
    console.error('接口请求失败:', error);
    return null;
  }
}

function init() {
    //用户数量
    InitUserCount()
        .then(res => {
            console.info(res.data.data);
            if (res.data.code == 200000) {
                registryUserCount.value = res.data.data.registryUserCount;
                activeUserCount.value = res.data.data.activeUserCount;
            }
        });
    InitStationCount()
    .then(res => {
        console.info(res.data.data);
        if (res.data.code === 200000) {
          totalStationCount.value = res.data.data.totalStationCount;
          onlineStationCount.value = res.data.data.onlineStationCount;
          totalGunCount.value = res.data.data.totalGunCount;
          onlineGunCount.value = res.data.data.onlineGunCount;
        }
    }).catch(err => {
      console.error(err);
    });
    InitChargingCount()
    .then(res => {
        console.info(res.data.data);
        if (res.data.code === 200000) {
          chargingTimesCount.value = res.data.data.chargingTimesCount;
          chargingAmountCount.value = res.data.data.chargingAmountCount;
        }
    }).catch(err => {
      console.error(err);
    });
  PayOrderCount().then(res => {
    console.info(res.data.data);
    if (res.data.code === 200000) {
      payOrderCountTimes.value = res.data.data.payOrderCountTimes;
      payOrderFailCountTimes.value = res.data.data.payOrderFailCountTimes;
      payOrderCountAmount.value = res.data.data.payOrderCountAmount;
      payOrderFailCountAmount.value = res.data.data.payOrderFailCountAmount;
    }
  }).catch(err => {
    console.error(err);
  });
}
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>